<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button class="fr" type="primary" @click="submit" :loading="submitLoading">提交所有数据
    </el-button>
    <el-input class="fr" type="primary" placeholder='出库原因' v-model='data.reason' style='width:150px;margin-right:15px'>
    </el-input>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 160px;" @change="whChange" v-model="data.warehouse"
        placeholder="选择仓库" :disabled="list.length > 0">
        <el-option v-for="i in whOptions" :key="i.value" :label="i.label" :value="i">
        </el-option>
      </el-select>
      <el-select class="filter-item" style="width: 220px;" :disabled="!data.warehouse" v-model="data.order"
        placeholder="请选择工单">
        <el-option v-for="i in orderOptions" :key="i.value" :label="i.label" :value="i">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="checkOrder">查询单据</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <z-table :list="list" :tableProps="tableProps" :columns="columns" @row-click="clickRow">
          <template v-slot:content="v">
            <span>{{v.row[v.key]}}</span>
          </template>
        </z-table>
      </el-col>
      <el-col :span="12">
        <z-table :list="current.detail" :tableProps="tableProps2" :columns="columns2">
          <template v-slot:content="v">
            <span v-if="v.key==='this_qty'">
              <el-input-number v-model="v.row['this_qty']" @change="qtyChange" :min="0"></el-input-number>
            </span>
            <span v-else>{{v.row[v.key]}}</span>
          </template>
          <template v-slot:operation="v">
            <a href="#" class="text-green" @click.prevent="autoQty(v.row,v.$index)">全部数量</a>
          </template>
        </z-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'

export default {
  mixins: [commonMixin],
  name: 'stockOut',
  data: function () {
    return {
      pageLoading: false,
      submitLoading: false,
      whOptions: [],
      orderOptions: [],
      stockOptions: [],
      materialOptions: [],
      orderData: {},
      tableProps: {
        border: true,
        opsColWith: 70,
        hideOperations: true,
        highlightCurrentRow: true,
      },
      columns: [
        { title: '料号', key: 'key_part_no', width: 140 },
        { title: '料名', key: 'key_part_name' },
        { title: '应发数量', key: 'should_sendnums', width: 80 },
        { title: '已发数量', key: 'issued_sennums', width: 80 },
        { title: '本次数量', key: 'this_count', width: 80 },
        // { title: '单位', key: 'unit_code', width: 70 },
      ],
      tableProps2: {
        border: true,
        opsColWith: 70,
        hideOperations: false,
      },
      columns2: [
        { title: '库位', key: 'stock_code', width: 80 },
        // { title: '供应商', key: 'vendor_code', width: 100 },
        { title: '批次', key: 'batch', width: 80 },
        { title: '库存数量', key: 'qty', width: 80 },
        { title: '本次出库', key: 'this_qty' },
      ],
      data: {},
      list: [],
      current: { detail: [] },
    }
  },
  methods: {
    clickRow(v) {
      this.current.detail = v.detail.map((val) => {
        return {
          ...val,
          this_qty: 1,
          material_id: v.material_id,
          stock_id: v.stock_id,
        }
      })
    },
    autoQty(r) {
      r.this_qty = r.qty + 0
      this.qtyChange()
    },
    qtyChange() {
      this.current.this_qty = _.sum(this.current.detail.map((i) => (i.this_qty ? i.this_qty : 0)))
    },
    whChange(v) {
      // if (v) {
      //   this.$request(this.$api.stock + 'getbywhid', { id: v.value }).then((r) => {
      //     this.stockOptions = this.arrayOptions(r.datas, 'id', ['stock_code'])
      //   })
      // } else {
      //   this.stockOptions = []
      // }
    },
    checkOrder() {
      if (this.data.order) {
        this.current.detail = []
        this.pageLoading = true
        this.$request(this.$api.stockOutList, {
          warehouse_id: this.data.warehouse.value,
          mo_id: this.data.order.value,
        })
          .then((r) => {
            this.pageLoading = false
            console.log(r)
            this.orderData = r.manlist
            this.list = this.orderData.map((r) => {
              console.log(r)
              return {
                material_id: r.material_id, //物料id
                key_part_no: r.key_part_no, // 物料编码
                key_part_name: r.key_part_name, //物料名称
                should_sendnums: r.should_sendnums, //应发数量
                issued_sennums: r.issued_sennums, //已发数量
                this_count: r.this_count, // 本次数量
                unit_code: r.unit_code, //单位
                stock_id: r.stock_id, //库位ID
                stock_code: r.stock_code, //库位编码，
                vendor_id: r.vendor_id, // 供应商
                vendor_code: r.vendor_code, //供应商编码
                vendor_name: r.vendor_name, // 供应商名称
                batch: r.lot_date_code, //批次
                qty: r.qty,
                material_barcode: r.material_barcode,
                detail: [...r.wm_data],
              }
            })
          })
          .catch(() => {
            this.pageLoading = false
          })
      }
    },
    submit() {
      console.log(this.current.detail)
      // var tmp = _.flatten(this.list.map((i) => i.detail.filter((i) => i.this_qty > 0)))
      if (this.list.length == 0) {
        this.$message({
          message: '没有需要提交的数据',
          type: 'error',
        })
        return
      }
      console.log(this.data.reason)
      if (!this.data.reason) {
        this.$message.error('请输入出库原因')
        return false
      }
      this.submitLoading = true
      this.pageLoading = true
      this.$request(
        this.$api.stockOutSubmit,
        {
          wh_id: this.data.warehouse.value,
          order_no: this.data.order.value,
          reason: this.data.reason,
          _list: JSON.stringify(this.current.detail),
        },
        'post',
      )
        .then((r) => {
          this.submitLoading = false
          this.pageLoading = false

          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.data.order = {}
          this.list = []
          this.current = { detail: [] }
        })
        .catch(() => {
          this.pageLoading = false

          this.submitLoading = false
        })
    },
  },
  created: function () {
    this.$request(this.$api.warehouse + 'getlist', { curPage: 1, pageSize: 999, warehouse_type: '0' }).then((r) => {
      console.log(r)
      this.whOptions = this.arrayOptions(r.list, 'id', ['warehouse_code', 'warehouse_name'])
    })
    this.$request(this.$api.stockOutOrder, {
      page: 1,
      size: 999,
    }).then((r) => {
      console.log(r)
      this.orderOptions = this.arrayOptions(r.list, 'id', ['mo_no'])
    })
  },
}
</script>
<style scoped>
</style>
